<template>
    <div class="l-1">
        <!--头部+banner-->
        <div class="a-1">
            <!--顶部导航-->
            <div class="a-2">
                <div class="a-3">
                    <Header v-bind:state=0></Header>
                </div>
            </div>
        </div>
        <!--登录-->
        <div class="r-1">
            <div class="r-2" >
                <div class="r-3">
                    <img src="@/assets/image/logo3.png" />
                </div>
                <ul class="r-4">
                    <li :class="type==1?'active':''" @click="changeType(1)"><span>账号登录</span></li>
                    <li :class="type==2?'active':''" @click="changeType(2)"><span>短信登录</span></li>
                </ul>
                <div class="r-5">
                    <form class="r-6" v-if="type==1">
                        <div class="r-7"><img class="r-8" src="@/assets/image/yhm.png"/><input class="r-9" v-model="username" type="text" placeholder="请输入账户/手机/信用代码"/></div>
                        <div class="r-7"><img class="r-8" src="@/assets/image/mm.png"/><input class="r-9" v-model="password" type="password" placeholder="请输入登录密码"/></div>
                        <button class="r-10" type="button" @click="loginUPButton">登录</button>
                        <div class="r-11">
                            <label class="r-12"><input name="jz" type="checkbox" value="">记录登录状态</label>
                            <span class="r-13">
							<a class="r-14" href="javascript:;" @click="goRegister">注册新用户</a>
							<a class="r-15" href="javascript:;">忘记密码？</a>
						</span>
                        </div>
                    </form>
                    <form class="r-6" v-if="type==2">
                        <div class="r-7"><img class="r-8" src="@/assets/image/phone.png"/><input class="r-9" type="text" placeholder="请输入手机账号"/></div>
                        <div class="r-7"><img class="r-8" src="@/assets/image/mm.png"/><input class="r-9" type="text" placeholder="请输入短信验证码"/><button class="r-16">发送验证码</button></div>
                        <button class="r-10" type="button">登录</button>
                        <div class="r-11">
                            <label class="r-12"><input name="jz" type="checkbox" value="">记录登录状态</label>
                            <span class="r-13">
							<a class="r-14" href="javascript:;" @click="goRegister">注册新用户</a>
							<a class="r-15" href="javascript:;">忘记密码？</a>
						</span>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Header from '@/views/header.vue';
    import {loginUP,loginUD} from '@/api/login';
    import {setToken} from '@/utils/auth'
    export default {
        components:{
            Header
        },
        name: "Login",
        data(){
            return{
                type:1,
                username:"",
                password:"",
                sms:"",
            }
        },
        methods:{
            changeType(e){ //切换登录方式
                this.type=e;
            },
            goRegister(){ //前往注册页面
                this.$router.push('/register');
            },
            loginUPButton(){
                let data={username:this.username,password:this.password};
                loginUP(data).then(response=>{
                    console.log(response);
                    if(response.code==200){
                        setToken(response.data);
                        this.$router.push('/');
                    }else{
                        console.log(response.msg);
                    }

                })
            },
            loginUDButton(){
                let data={username:this.username,sms:this.sms}
                loginUD(data).then(response=>{
                    console.log(response);
                    localStorage.setItem("token", response.data.token);
                })
            }
        }
    }
</script>

<style scoped>

    @import "../css/index.css";
    @import "../css/login.css";
    @import "../css/idangerous.swiper.css";
</style>
